<template>
  <div>
    <p>
      <el-form :model="form" ref="form" label-width="150px">
        <el-tabs type="border-card">
          <el-tab-pane :label="$t('home.general')">
            <template v-if="form.roomKeyType === 1">
              <p>
                <el-alert :title="$t('home.useAuthCodeWarning')" type="warning" show-icon :closable="false"></el-alert>
              </p>
              <el-form-item
                :label="$t('home.room')" prop="roomId" :rules="[
                  { required: true, message: $t('home.roomIdEmpty') },
                  { type: 'integer', min: 1, message: $t('home.roomIdInteger') }
                ]"
              >
                <el-row>
                  <el-col :span="6">
                    <el-select v-model="form.roomKeyType" style="width: 100%">
                      <el-option :label="$t('home.authCode')" :value="2"></el-option>
                      <el-option :label="$t('home.roomId')" :value="1"></el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="18">
                    <el-input v-model.number="form.roomId" type="number" min="1"></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
            </template>

            <el-form-item v-else-if="form.roomKeyType === 2"
              :label="$t('home.room')" prop="authCode" :rules="[
                { required: true, message: $t('home.authCodeEmpty') },
                { pattern: /^[0-9A-Z]{12,14}$/, message: $t('home.authCodeFormatError') }
              ]"
            >
              <el-row>
                <el-col :span="6">
                  <el-select v-model="form.roomKeyType" style="width: 100%">
                    <el-option :label="$t('home.authCode')" :value="2"></el-option>
                    <el-option :label="$t('home.roomId')" :value="1"></el-option>
                  </el-select>
                </el-col>
                <el-col :span="18">
                  <el-tooltip placement="top-start">
                    <div slot="content">
                      <!-- 不知道为什么router-link获取不到$router，还是用el-link了，不过会有一次丑陋的刷新 -->
                      <el-link
                        type="primary" :href="$router.resolve({ name: 'help' }).href"
                      >{{ $t('home.howToGetAuthCode') }}</el-link>
                    </div>
                    <el-input v-model.number="form.authCode"></el-input>
                  </el-tooltip>
                </el-col>
              </el-row>
            </el-form-item>

            <el-card shadow="never">
              <el-row :gutter="20">
                <el-col :xs="24" :sm="6">
                  <el-form-item>
                    <span slot="label">
                        显示消息弹幕
                      <el-switch v-model="form.showDanmaku"></el-switch>
                    </span>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="4">
                  <el-form-item >
                    <span slot="label">
                        合并相似消息弹幕
                    </span>
                    <el-switch v-model="form.mergeSimilarDanmaku"></el-switch>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="8">
                  <el-form-item :title="$t('home.openSpecificTutorial')">
                    <span slot="label">
                      最大弹幕数
                    </span>
                    <el-input v-model.number="form.maxNumber" type="number" min="1"></el-input>
                  </el-form-item>
                </el-col>
               </el-row>
            </el-card>
            
            <el-card shadow="never">
              <el-row :gutter="20">
                <el-col :xs="24" :sm="6">
                  <el-form-item>
                    <span slot="label" >
                        {{$t('home.showInteractWordEnter')}}
                    </span>
                    <el-switch v-model="form.showInteractWordEnter"></el-switch>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="6">
                  <el-form-item>
                    <span slot="label" >
                        {{$t('home.showInteractWordFollow')}}
                    </span>
                    <el-switch v-model="form.showInteractWordFollow"></el-switch>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="6">
                  <el-form-item>
                    <span slot="label" >
                        {{$t('home.showInteractWordShare')}}
                    </span>
                    <el-switch v-model="form.showInteractWordShare"></el-switch>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>

            <el-card shadow="never">
              <el-row :gutter="20">
                <el-col :xs="24" :sm="6">
                  <el-form-item :title="$t('home.openSpecificTutorial')">
                    <span slot="label">
                      <a href="https://www.yuque.com/doodle-irifi/ueaigm/laogg2#b9gux" target="_blank">
                        {{$t('home.showSuperchat')}}
                      </a>
                    </span>
                    <el-switch v-model="form.showSuperchat"></el-switch>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="6">
                  <el-form-item :title="$t('home.openSpecificTutorial')">
                    <span slot="label">
                      <a href="https://www.yuque.com/doodle-irifi/ueaigm/laogg2#b9gux" target="_blank">
                        {{$t('home.showNewMember')}}
                      </a>
                    </span>
                    <el-switch v-model="form.showNewMember"></el-switch>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="6">
                  <el-form-item :title="$t('home.openSpecificTutorial')">
                    <span slot="label">
                      <a href="https://www.yuque.com/doodle-irifi/ueaigm/laogg2#b9gux" target="_blank">
                        {{$t('home.showGift')}}
                      </a>
                    </span>
                    <el-switch v-model="form.showGift"></el-switch>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="6">
                  <el-form-item :title="$t('home.openSpecificTutorial')">
                    <span slot="label">
                      <a href="https://www.yuque.com/doodle-irifi/ueaigm/laogg2#b9gux" target="_blank">
                        {{$t('home.showGiftInfo')}}
                      </a>
                    </span>
                    <el-switch v-model="form.showGiftInfo"></el-switch>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :xs="24" :sm="6">
                  <el-form-item :title="$t('home.openSpecificTutorial')">
                    <span slot="label">
                        {{$t('home.mergeGift')}}
                    </span>
                    <el-switch v-model="form.mergeGift"></el-switch>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="6">
                  <el-form-item :title="$t('home.openSpecificTutorial')">
                    <span slot="label">
                        {{$t('home.minGiftPrice')}}
                    </span>
                    <el-input v-model.number="form.minGiftPrice" type="number" min="0" :placeholder="$t('home.minGiftPricePlaceholder')"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="6">
                  <el-form-item :title="$t('home.openSpecificTutorial')">
                    <span slot="label">
                        {{$t('home.minTickerPrice')}}
                    </span>
                    <el-input v-model.number="form.minTickerPrice" type="number" min="0.1" :placeholder="$t('home.minGiftPricePlaceholder')"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>
          
            <el-card shadow="never">
              <el-row :gutter="20">
                <el-col :xs="24" :sm="6">
                  <el-form-item :label="$t('home.danmakuAtBottom')" :title="$t('home.openSpecificTutorial')">
                    <span slot="label">
                        {{$t('home.danmakuAtBottom')}}
                    </span>
                    <el-switch v-model="form.danmakuAtBottom"></el-switch>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="6">
                  <el-form-item :label="$t('home.tickerAtButtom')" :title="$t('home.openSpecificTutorial')">
                    <span slot="label">
                        {{$t('home.tickerAtButtom')}}
                    </span>
                    <el-switch v-model="form.tickerAtButtom"></el-switch>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>

            <div class="headTitle">
              当前皮肤：{{ currentSkinName }}
            </div>

            <div class="skinBox">
              <div v-for="(item,key) in skinConfigList" :key="key" class="item" :class="getClasses(item)"
              @click="changeSkin(item)">
                <div class="img">
                  <img :src="item.img" alt="空样式">
                </div>
                <div  class="name">{{ item.name }}</div>
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane :label="$t('home.block')">
            <el-row :gutter="20">
              <el-col :xs="24" :sm="8">
                <el-form-item :label="$t('home.giftDanmaku')">
                  <el-switch v-model="form.blockGiftDanmaku"></el-switch>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="8">
                <el-tooltip :content="$t('home.unavailableWhenUsingAuthCode')">
                  <el-form-item :label="$t('home.informalUser')">
                    <el-switch v-model="form.blockNewbie"></el-switch>
                  </el-form-item>
                </el-tooltip>
              </el-col>
              <el-col :xs="24" :sm="8">
                <el-tooltip :content="$t('home.unavailableWhenUsingAuthCode')">
                  <el-form-item :label="$t('home.unverifiedUser')">
                    <el-switch v-model="form.blockNotMobileVerified"></el-switch>
                  </el-form-item>
                </el-tooltip>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :xs="24" :sm="12">
                <el-tooltip :content="$t('home.unavailableWhenUsingAuthCode')">
                  <el-form-item :label="$t('home.blockLevel')">
                    <el-slider v-model="form.blockLevel" show-input :min="0" :max="60"></el-slider>
                  </el-form-item>
                </el-tooltip>
              </el-col>
              <el-col :xs="24" :sm="12">
                <el-form-item :label="$t('home.blockMedalLevel')">
                  <el-slider v-model="form.blockMedalLevel" show-input :min="0" :max="40"></el-slider>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item :label="$t('home.blockKeywords')">
              <el-input v-model="form.blockKeywords" type="textarea" :rows="5" :placeholder="$t('home.onePerLine')"></el-input>
            </el-form-item>
            <el-form-item :label="$t('home.blockUsers')">
              <el-input v-model="form.blockUsers" type="textarea" :rows="5" :placeholder="$t('home.onePerLine')"></el-input>
            </el-form-item>
          </el-tab-pane>

          <el-tab-pane :label="$t('home.advanced')">
            <el-row :gutter="20">
              <el-col :xs="24" :sm="8">
                <el-tooltip :content="$t('home.relayMessagesByServerTip')">
                  <el-form-item :label="$t('home.relayMessagesByServer')">
                    <el-switch v-model="form.relayMessagesByServer"></el-switch>
                  </el-form-item>
                </el-tooltip>
              </el-col>
              <el-col :xs="24" :sm="8">
                <el-tooltip :content="$t('home.requiresRelayMessagesByServer')">
                  <el-form-item :label="$t('home.autoTranslate')">
                    <el-tooltip :content="$t('home.disabledByServer')" placement="top" :disabled="serverConfig.enableTranslate">
                      <el-switch v-model="form.autoTranslate"
                        :disabled="!serverConfig.enableTranslate || !form.relayMessagesByServer"
                      ></el-switch>
                    </el-tooltip>
                  </el-form-item>
                </el-tooltip>
              </el-col>
            </el-row>
            <el-form-item :label="$t('home.giftUsernamePronunciation')">
              <el-radio-group v-model="form.giftUsernamePronunciation">
                <el-radio label="">{{$t('home.dontShow')}}</el-radio>
                <el-radio label="pinyin">{{$t('home.pinyin')}}</el-radio>
                <el-radio label="kana">{{$t('home.kana')}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-row>
              <el-col :xs="24" :sm="8">
                <el-tooltip :content="$t('home.importPresetCssTip')">
                  <el-form-item :label="$t('home.importPresetCss')">
                    <el-switch v-model="form.importPresetCss"></el-switch>
                  </el-form-item>
                </el-tooltip>
              </el-col>
            </el-row>
          </el-tab-pane>

          <el-tab-pane :label="$t('home.emoticon')">
            <el-table :data="form.emoticons">
              <el-table-column prop="keyword" :label="$t('home.emoticonKeyword')" width="170">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.keyword"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="url" :label="$t('home.emoticonUrl')">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.url"></el-input>
                </template>
              </el-table-column>
              <el-table-column :label="$t('home.operation')" width="170">
                <template slot-scope="scope">
                  <el-button-group>
                    <el-button type="primary" icon="el-icon-upload2" :disabled="!serverConfig.enableUploadFile"
                      @click="uploadEmoticon(scope.row)"
                    ></el-button>
                    <el-button type="danger" icon="el-icon-minus" @click="delEmoticon(scope.$index)"></el-button>
                  </el-button-group>
                </template>
              </el-table-column>
            </el-table>
            <p>
              <el-button type="primary" icon="el-icon-plus" @click="addEmoticon">{{$t('home.addEmoticon')}}</el-button>
            </p>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </p>
<!-- v-if="form.roomKeyType === 1" -->
    <p >
      <el-card class="login-card">
        <el-alert :title="$t('home.useSecondaryScanCode')" type="warning" style="background-color: #fef0f0; color: #F56C6C;" show-icon :closable="false"></el-alert>
        <div class="login-card-content">
          <el-tag :type="this.login.isLogin ? 'success' : 'danger'">{{ this.login.isLogin ? $t('home.isLoginTrue') : $t('home.isLoginFalse') }}</el-tag>
          <div v-if="this.login.isLogin"> <el-tag>登录日期： {{ this.login.loginDate  }}</el-tag></div>
          <!-- <PButton label="测试" /> -->
          <el-button type="primary" @click="startLogin">{{$t('home.startLogin')}}</el-button>
          <el-button v-if="this.login.isLogin" type="danger" @click="logout" style="margin-left: 0;">{{$t('home.logout')}}</el-button>
          <img :src="this.login.image" style="max-width: 150px; max-height: 150px;" v-if="this.login.image && this.login.image.length > 0"/>
        </div>
      </el-card>
    </p>

    <p>
      <el-card>
        <el-form :model="form" label-width="150px">
          <p v-if="obsRoomUrl.length > 1024">
            <el-alert :title="$t('home.urlTooLong')" type="warning" show-icon :closable="false"></el-alert>
          </p>
          <el-tooltip :content="$t('home.roomUrlUpdated')" v-model="showRoomUrlUpdatedTip" manual placement="top">
            <el-form-item :label="$t('home.roomUrl')">
              <el-input ref="roomUrlInput" readonly :value="obsRoomUrl" style="width: calc(100% - 8em); margin-right: 1em;"></el-input>
              <el-button type="primary" icon="el-icon-copy-document" @click="copyUrl"></el-button>
            </el-form-item>

            
          </el-tooltip>
          <el-tooltip :content="$t('home.roomUrlUpdated')" manual placement="top">
            <el-form-item label="盲盒姬地址">
              <el-input ref="giftUrlInput" readonly :value="giftUrl" style="width: calc(100% - 8em); margin-right: 1em;"></el-input>
              <el-button type="primary" icon="el-icon-copy-document" @click="copyGiftUrl"></el-button>
            </el-form-item>
          </el-tooltip>
          <el-form-item>
            <el-button type="primary" :disabled="!roomUrl" @click="enterRoom">{{$t('home.enterRoom')}}</el-button>
            <el-button @click="enterTestRoom">{{$t('home.enterTestRoom')}}</el-button>
            <el-button @click="exportConfig">{{$t('home.exportConfig')}}</el-button>
            <el-button @click="importConfig">{{$t('home.importConfig')}}</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </p>
  </div>
</template>

<script>
import _ from 'lodash'
import download from 'downloadjs'
import axios from 'axios'

import { mergeConfig } from '@/utils'
// import { getSkinList } from '@/api/chat'
import * as mainApi from '@/api/main'
import * as chatConfig from '@/api/chatConfig'

export default {
  name: 'Home',
  data() {
    return {
      serverConfig: {
        enableTranslate: true,
        enableUploadFile: true,
        loaderUrl: ''
      },
      skinConfigList: [
        {
          name: '空样式',
          img: "https://2023blivechat.oss-cn-hangzhou.aliyuncs.com/skin/%E8%8A%B1%E8%8A%B1%281%29.png",
          url: 'https://blivechat.oss-cn-beijing.aliyuncs.com/DM/css/mystyle1.css',
          value: 'normal'
        },
        {
          name: '碎冰蓝',
          img: "https://2023blivechat.oss-cn-hangzhou.aliyuncs.com/skin/%E5%87%BA%E6%B8%B8%E5%9B%BE%E6%A0%87.png",
          url: 'https://blivechat.oss-cn-beijing.aliyuncs.com/mycat/css/A38%E7%A2%8E%E5%86%B0%E8%93%9D.%E8%BF%B7%E5%A2%83%E5%8F%8C%E7%94%9F.css',
          value: '001'
        }
      ],
      form: {
        ...chatConfig.getLocalConfig(),
        roomKeyType: parseInt(window.localStorage.roomKeyType || '2'),
        roomId: parseInt(window.localStorage.roomId || '1'),
        authCode: window.localStorage.authCode || '',
      },
      // 因为$refs.form.validate是异步的所以不能直接用计算属性
      // getUnvalidatedRoomUrl -> unvalidatedRoomUrl -> updateRoomUrl -> roomUrl
      roomUrl: '',
      showRoomUrlUpdatedTip: false,
      login: {
        image: '',
        isLogin: false,
        loginDate: ''
      }
    }
  },
  computed: {
    roomKeyValue() {
      if (this.form.roomKeyType === 1) {
        return this.form.roomId
      } else {
        return this.form.authCode
      }
    },
    unvalidatedRoomUrl() {
      return this.getUnvalidatedRoomUrl(false)
    },
    obsRoomUrl() {
      console.log(this.roomUrl)
      
      if (this.roomUrl === '') {
        return ''
      }
      if (this.serverConfig.loaderUrl === '') {
        return this.roomUrl
      }
      let url = new URL(this.serverConfig.loaderUrl)
      url.searchParams.append('url', this.roomUrl)
      return url.href
    },
    giftUrl() {
      let url = `${window.location.protocol}//${window.location.host}/gift/5389469`
      console.log(url)
      return url
    },
    // 获取当前皮肤的名称
    currentSkinName() {
      const skinName = this.skinConfigList.find(t => t.value === this.form.skinConfig)
      console.log(skinName)
      return skinName ? skinName.name : ""
    }

  },
  watch: {
    unvalidatedRoomUrl: 'updateRoomUrl',
    roomUrl: _.debounce(function(val, oldVal) {
      // 提示用户URL已更新
      // 如果语言不是默认的中文，则刷新页面时也会有一次提示，没办法
      if (val !== '' && oldVal !== '') {
        this.showRoomUrlUpdatedTip = true
        this.delayHideRoomUrlUpdatedTip()
      }

      // 保存配置
      window.localStorage.roomKeyType = this.form.roomKeyType
      window.localStorage.roomId = this.form.roomId
      window.localStorage.authCode = this.form.authCode
      // this.form.skinConfig = 'normal'
      chatConfig.setLocalConfig(this.form)
    }, 500)
  },
  mounted() {
    this.updateLoginStatus()
    this.updateServerConfig()
    this.updateRoomUrl()
  },
  methods: {
    // 动态class
    getClasses(item) {
      return item.value === this.form.skinConfig ? "active" : ""
    },
    // 更改皮肤
    changeSkin(item) {
      this.form.skinConfig = item.value
      chatConfig.setLocalConfig(this.form)
    },
    test() {
      console.log(this.chatConfig)
    },
    copyGiftUrl() {
      this.$refs.giftUrlInput.select()
      document.execCommand('Copy')
    },
    async updateServerConfig() {
      try {
        this.serverConfig = (await mainApi.getServerInfo()).config
      } catch (e) {
        this.$message.error(`Failed to fetch server information: ${e}`)
        throw e
      }
    },
    async updateRoomUrl() {
      // 防止切换roomKeyType时校验的还是老规则
      await this.$nextTick()
      try {
        await this.$refs.form.validate()
      } catch {
        this.roomUrl = ''
        return
      }
      // 没有异步的校验规则，应该不需要考虑竞争条件
      this.roomUrl = this.unvalidatedRoomUrl
    },
    delayHideRoomUrlUpdatedTip: _.debounce(function() {
      this.showRoomUrlUpdatedTip = false
    }, 3000),

    addEmoticon() {
      this.form.emoticons.push({
        keyword: '[Kappa]',
        url: ''
      })
    },
    delEmoticon(index) {
      this.form.emoticons.splice(index, 1)
    },
    uploadEmoticon(emoticon) {
      let input = document.createElement('input')
      input.type = 'file'
      input.accept = 'image/png, image/jpeg, image/jpg, image/gif'
      input.onchange = async() => {
        let file = input.files[0]
        if (file.size > 1024 * 1024) {
          this.$message.error(this.$t('home.emoticonFileTooLarge'))
          return
        }

        let res
        try {
          res = await mainApi.uploadEmoticon(file)
        } catch (e) {
          this.$message.error(`Failed to upload: ${e}`)
          throw e
        }
        emoticon.url = res.url
      }
      input.click()
    },

    enterRoom() {
      window.open(this.roomUrl, `room ${this.roomKeyValue}`, 'menubar=0,location=0,scrollbars=0,toolbar=0,width=600,height=600')
    },
    enterTestRoom() {
      window.open(this.getUnvalidatedRoomUrl(true), 'test room', 'menubar=0,location=0,scrollbars=0,toolbar=0,width=600,height=600')
    },
    getUnvalidatedRoomUrl(isTestRoom) {
      // 重要的字段放在前面，因为如果被截断就连接不了房间了
      let frontFields = {
        roomKeyType: this.form.roomKeyType
      }
      let backFields = {
        lang: this.$i18n.locale,
        emoticons: JSON.stringify(this.form.emoticons)
      }
      let ignoredNames = new Set(['roomId', 'authCode'])
      let query = { ...frontFields }
      for (let name in this.form) {
        if (!(name in frontFields || name in backFields || ignoredNames.has(name))) {
          query[name] = this.form[name]
        }
      }
      Object.assign(query, backFields)

      // 去掉和默认值相同的字段，缩短URL长度
      query = Object.fromEntries(Object.entries(query).filter(
        ([name, value]) => {
          let defaultValue = chatConfig.DEFAULT_CONFIG[name]
          if (defaultValue === undefined) {
            return true
          }
          if (typeof defaultValue === 'object') {
            defaultValue = JSON.stringify(defaultValue)
          }
          return value !== defaultValue
        }
      ))

      let resolved
      if (isTestRoom) {
        resolved = this.$router.resolve({ name: 'test_room', query })
      } else {
        resolved = this.$router.resolve({ name: 'room', params: { roomKeyValue: this.roomKeyValue }, query })
      }
      return `${window.location.protocol}//${window.location.host}${resolved.href}`
    },
    copyUrl() {
      this.$refs.roomUrlInput.select()
      document.execCommand('Copy')
    },

    exportConfig() {
      let cfg = mergeConfig(this.form, chatConfig.DEFAULT_CONFIG)
      download(JSON.stringify(cfg, null, 2), 'blivechat.json', 'application/json')
    },
    importConfig() {
      let input = document.createElement('input')
      input.type = 'file'
      input.accept = 'application/json'
      input.onchange = () => {
        let reader = new window.FileReader()
        reader.onload = () => {
          let cfg
          try {
            cfg = JSON.parse(reader.result)
          } catch (e) {
            this.$message.error(this.$t('home.failedToParseConfig') + e)
            return
          }
          this.importConfigFromObj(cfg)
        }
        reader.readAsText(input.files[0])
      }
      input.click()
    },
    importConfigFromObj(cfg) {
      cfg = mergeConfig(cfg, chatConfig.deepCloneDefaultConfig())
      chatConfig.sanitizeConfig(cfg)
      this.form = {
        ...cfg,
        roomKeyType: this.form.roomKeyType,
        roomId: this.form.roomId,
        authCode: this.form.authCode
      }
    },
    async updateLoginStatus() {
      const res = (await axios.get('/api/login/status')).data
      this.login.isLogin = res.is_login
      this.login.loginDate = res.login_date
    },
    async logout() {
      await axios.get('/api/login/kill')
      this.updateLoginStatus()
    },
    async startLogin() {
      const res = (await axios.get('/api/login/start')).data
      console.log(res)
      this.login.key = res.key
      this.login.image = `data:image/png;base64,${res.qr}`
      this.login.check = setInterval(this.checkLogin, 1000)
    },
    async checkLogin() {
      const res = (await axios.get('/api/login/check', { params: { 'qrcode_key': this.login.key } })).data
      if (res.ok === true) {
        this.login.image = ''
        clearInterval(this.login.check)
        this.updateLoginStatus()
      }
    }
  }
}
</script>

<style>
.el-tab-pane>.el-card {
  border-radius: 8px;
  border: none;
  background-color: none;
}
.el-tab-pane>.el-card:hover {
  background-color: #ebeef5;
}

.el-form-item__label:hover {
    color: #409eff;
}

.el-card__body {
  padding: 20px 20px 4px 20px;
}

a {
  color: #606266;
}
a:hover {
  color: #409eff;
}

.el-message-box__content {
  font-size: 18px;
  font-weight: bold;
}

.del-all-confirm-button:hover {
  background: #f78989;
  border-color: #f78989;
}

.del-all-confirm-button:focus,
.del-all-confirm-button {
  background: #f56c6c;
  border-color: #f56c6c;
}
.skinBox {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}

.skinBox .item {
    width: 200px;
    height: 130px;
    border: 4px solid transparent;
    overflow: hidden;
    position: relative;
    cursor: pointer
}

.skinBox .item.active {
    border-color: #8ba6cf;
}


.skinBox .item .img {
    width: 100%;
    height: 100%;
}

.skinBox .item .img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}
.headTitle {
    color: #b9c8df;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
    margin-top: 20px
}

</style>
